<template>
  <div class="vip-page">
    <div class="router-content">
      <div v-if="pageType == 'list'">
        <QueryBar
          :queryForm="queryForm"
          :queryConfig="queryBar"
          @handleQueryClick="handleQueryClick"
        />
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="50">
            <template slot-scope="scope">{{
              10 > scope.$index + 1
                ? "0" + (scope.$index + 1)
                : scope.$index + 1
            }}</template>
          </el-table-column>
          <el-table-column prop="roomId" label="直播间ID"> </el-table-column>

          <el-table-column prop="roomName" label="直播间名称">
          </el-table-column>

          <el-table-column prop="anchorName" label="主播名"> </el-table-column>

          <el-table-column prop="startTime" label="直播开始时间">
            <template slot-scope="scope">
              {{ scope.row.startTime | formatTime }}
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="直播结束时间">
            <template slot-scope="scope">
              {{ scope.row.endTime | formatTime }}
            </template>
          </el-table-column>
          <el-table-column prop="liveStatus" label="直播状态">
            <template slot-scope="scope">
              {{
                scope.row.liveStatus == 101
                  ? "直播中"
                  : scope.row.liveStatus == 103
                  ? "已结束"
                  : "未开始"
              }}
            </template>
          </el-table-column>

          <el-table-column label="操作" :width="188">
            <template slot-scope="scope">
              <el-tag
                v-if="query"
                @click="handleOptions({ key: '1', index: scope.$index })"
                size="medium"
                style="margin: 0 5px 0 0; cursor: pointer"
                >详情</el-tag
              >

              <el-tag
                v-if="del"
                @click="handleOptions({ key: '2', index: scope.$index })"
                size="medium"
                style="cursor: pointer"
                >删除</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 50px"
          @current-change="handlePageChange"
          :current-page="pageParams.pageNum"
          :page-sizes="[pageParams.pageSize]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <div v-else>
        <el-form
          label-width="120px"
          ref="formModel"
          style="width: 80%; margin: 32px auto"
        >
          <el-form-item label="直播间ID："
            >{{ formModel.roomId }}
          </el-form-item>
          <el-form-item label="直播间名称："
            >{{ formModel.roomName }}
          </el-form-item>
          <el-form-item label="主播名：">
            {{ formModel.anchorName }}</el-form-item
          >
          <el-form-item label="背景图：">
            <img :src="formModel.coverImg" alt="" />
          </el-form-item>
          <el-form-item label="分享图：">
            <img :src="formModel.shareImg" alt="" />
          </el-form-item>
          <el-form-item label="直播时间：">
            <el-date-picker
              :disabled="pageType == 'details'"
              v-model="formModel.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              align="center"
            >
            </el-date-picker>
            <span style="margin: 0 20px">至</span>
            <el-date-picker
              :disabled="pageType == 'details'"
              v-model="formModel.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              align="center"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="直播类型：">
            <el-radio-group v-model="formModel.liveType" size="mini" disabled>
              <el-radio disabled label="0">推流</el-radio>
              <el-radio disabled label="1">手机直播</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label>
            <el-button
              type="primary"
              @click="pageType = 'list'"
              :loading="$store.state.subLoading"
              >返回</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <Modal
        :title="modalType == 'del' ? '删除确认' : ''"
        :dialogVisible="visible"
        :loading="$store.state.subLoading"
        @handleClose="handleCancel"
        @handleConfirm="handleConfirm"
        width="600px"
      >
        <div v-if="modalType == 'del'">
          <i
            class="el-icon-warning"
            style="color: #faad14; font-size: 18px; margin: 0 20px"
          ></i
          >确认要删除该条直播吗？
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import QueryBar from "@/components/common/QueryBar.vue";
import Modal from "@/components/common/Modal.vue";
import { queryBar } from "./configuration/live.js";
import api from "@/api/modules/dynamic/live.js";
import util from "@/utils";
export default {
  name: "Live",
  components: { QueryBar, Modal },
  data() {
    return {
      query: true,
      del: true, //按钮权限

      pageType: "list",
      modalType: "",
      visible: false,
      queryForm: {},
      queryBar: queryBar,
      currentRow: "",
      tableData: [],
      count: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      formModel: "",
      //
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 设置页面按钮权限
      let btns = this.$store.state.userInfo.list[1].children[5];
      this.query = btns.children[0].havePermission;
      this.del = btns.children[1].havePermission;

      this.getData(this.pageParams);
    });
  },
  methods: {
    getData(params) {
      try {
        api
          .getLiveRoomPage(
            params ? params : { ...this.pageParams, ...this.queryForm }
          )
          .then((res) => {
            this.tableData = res.data;
            this.count = +res.count;
            this.pageType = "list";
          });
      } catch (error) {
        console.log(error);
      }
      this.modalType = "";
      this.visible = false;
    },
    handlePageChange(val) {
      this.pageParams.pageNum = val;
      this.getData({ ...this.pageParams, ...this.queryForm });
    },
    handleQueryClick(val) {
      switch (val) {
        case "search":
          if (this.queryForm.timeRange) {
            let obj = {
              newsTitle: this.queryForm.newsTitle,
              state: this.queryForm.state,
              startTime: util.formatTime(this.queryForm.timeRange[0]),
              endTime: util.formatTime(this.queryForm.timeRange[1]),
            };
            this.pageParams.pageNum = 1;
            this.getData({ ...this.pageParams, ...obj });
          } else {
            this.pageParams.pageNum = 1;
            this.getData({ ...this.pageParams, ...this.queryForm });
          }
          break;
        case "reset":
          Object.keys(this.queryForm).forEach((item) => {
            this.queryForm[item] = "";
          });
          this.pageParams.pageNum = 1;
          this.getData(this.pageParams);
          break;
      }
    },
    handleOptions(val) {
      const { key, index } = val;
      this.currentRow = this.tableData[index];
      switch (key) {
        case "1":
          api.getLiveRoom({ roomId: this.currentRow.roomId }).then((res) => {
            res.data.liveType = `${res.data.liveType}`;
            this.formModel = res.data;
            this.pageType = "details";
          });
          break;
        case "2":
          this.modalType = "del";
          this.visible = true;
          break;
      }
    },
    handleCancel() {
      this.visible = false;
    },
    handleConfirm() {
      if (this.pageParams.pageNum != 1 && this.tableData.length == 1) {
        this.pageParams.pageNum = this.pageParams.pageNum - 1;
      }
      api
        .deleteLiveRoom({
          roomId: this.currentRow.roomId,
        })
        .then((res) => {
          this.$message.success("删除成功");
          this.getData({ ...this.pageParams, ...this.queryForm });
        });
    },

    closeForm(formName) {
      this.$refs[formName].resetFields();
      this.pageType = "list";
    },
  },
};
</script>
<style lang="less" >
.vip-page {
  // .ql-editor {
  //   width: 100%;
  //   padding: 0;
  //   min-height: 344px;
  //   line-height: normal !important;
  //   overflow: hidden;
  //   /deep/ .ql-container.ql-snow {
  //     // height: 200px;
  //   }
  // }
  .el-upload,
  .el-upload--picture-card {
    width: 104px;
    height: 104px;
    line-height: 60px;
    box-sizing: border-box;
    border: 1px dashed #666;
    border-radius: 5px;
    overflow: hidden;
    img {
      width: 104px;
      height: 104px;
    }
  }
  .hasImg,
  .notImg {
    width: 102px;
    height: 102px;
    background-color: #f0f2f5;

    position: relative;
  }
  .notImg {
    padding-top: 35px;
    box-sizing: border-box;
    i {
      display: block;
      font-size: 16px;
      line-height: 10px;
    }
    span {
      display: block;
    }
  }
}
</style>
